<template>
  <div class="header">
    <div class="logo-box">
      <img src="../../assets/logo.png" alt="未来校招">
    </div>
    <div class="msg" v-if="$root.userInfo && $root.userInfo.id" @click="jumpTo" @touchstart="start"
         @touchend="end">
      <i class="iconfont icon-mail"></i>
    </div>
    <div v-if="$root.userInfo && $root.userInfo.id">
      <van-button type="warning" size="small" @click="showDialog" style="float: right; margin-top: 0em">退出登录</van-button>
      <van-button type="info" size="small" @click="connect" style="float: right; margin-top: 0em">交流平台</van-button>
    </div>
    <div class="login-btn" v-else>
      <router-link to="login">登录/注册</router-link>
    </div>
  </div>
</template>

<script>
import { removeUserInfo } from '@/utils/cookie'

export default {
  name: 'top-nav',
  data () {
    return {
      loop: null,
      timeOutEvent: null,
    }
  },
  created () {
  },
  mounted () {},
  methods: {
    connect() {
      window.location.href = 'http://wapchat.weilaixiaozhao.com/'
    },
    start () {
      clearTimeout(this.loop)
      this.loop = setTimeout(() => {
        this.showDialog()
      }, 2000)
    },
    end () {
      clearTimeout(this.loop)
      this.loop = null;
    },
    showDialog () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否退出登录？',
      }).then(() => {
        removeUserInfo()
        this.$store.dispatch('userInfo', null)
        this.$root.userInfo = null
        this.$router.push('/')
      }).catch(() => {
        // on cancel
      })
    },
    jumpTo () {
      this.$router.push({
        path: '/process',
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.header
  padding 0 20px
  height 55px
  line-height 55px
  display flex
  align-items center
  justify-content space-between

  .logo-box
    flex 0 0 110px
    height 28px
    line-height 28px
    font-size 0

    img
      vertical-align middle
      height 100%

  .login-btn
    a {
      display block
      line-height 28px
      width 88px
      text-align center
      color #fff
      background $color-main
      border-radius 14px
    }

  .msg
    width 60px
    text-align right

    i
      font-size 24px
      color $color-text

</style>
